<template>
  <div>
    <el-input placeholder="输入关键字进行过滤"
              v-model="filterText"
              clearable>
    </el-input>
    <el-tree v-loading="loading"
             ref="tree"
             class="zero-tree"
             :data="data"
             node-key="label"
             :highlight-current="true"
             :props="{ label: 'name' }"
             :filter-node-method="filterNode"
             @node-click="nodeClick">
      <span class="custom-tree-node"
            slot-scope="{ node, data }"
            @mouseover="mouseover(data)"
            @mouseleave="mouseout(data)">
        <span>{{ node.label }}</span>
        <div v-if="$hasPermission(addUrl) || $hasPermission(updateUrl) || $hasPermission(deleteUrl)"
             v-show="data.dropdownShow"
             @click.stop="() => {}">
          <el-dropdown placement="right-start"
                       trigger="click">
            <i class="el-icon-s-operation"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="$hasPermission(addUrl)"
                                icon="el-icon-circle-plus"
                                @click.native="initVxeModel('vxeModelRef')">新增字典</el-dropdown-item>
              <el-dropdown-item v-if="$hasPermission(updateUrl)"
                                icon="el-icon-edit-outline"
                                @click.native="initVxeModel('vxeModelRef', data)">修改字典</el-dropdown-item>
              <el-dropdown-item v-if="$hasPermission(deleteUrl)"
                                icon="el-icon-delete-solid"
                                @click.native="delTree(data)">删除字典</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </span>
    </el-tree>
    <TreeSideForm ref="vxeModelRef"
                  @nodeClick="nodeClick"
                  :initTreeData="initTreeData"
                  :addUrl="addUrl"
                  :updateUrl="updateUrl" />
  </div>
</template>

<script>
import TreeSideForm from './TreeSideForm' // 添加修改模块
export default {
  name: 'TreeSide',
  props: {
    dataListLoadingFun: {
      type: Function,
      default: null
    }
  },
  components: {
    TreeSideForm
  },
  data () {
    return {
      data: [],
      filterText: '',
      loading: false,
      addUrl: '/sysDict/add',
      updateUrl: '/sysDict/update',
      deleteUrl: '/sysDict/del'
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  created () {
    this.initTreeData()
  },
  methods: {
    initTreeData () {
      this.$axios({
        method: 'post',
        url: '/sysDict/list'
      }).then(res => {
        this.data = res.data
      })
    },
    mouseover (data) { // 鼠标移入
      this.$set(data, 'dropdownShow', true)
    },
    mouseout (data) { // 鼠标移除
      this.$set(data, 'dropdownShow', false)
    },
    filterNode (value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    initVxeModel (ref, data) {
      this.$refs[ref].initVxeModel(data)
    },
    delTree (data) {
      this.loading = true
      this.$emit('dataListLoadingFun', true)
      this.$axios({
        method: 'post',
        url: this.deleteUrl,
        data: [{ id: data.id }]
      }).then(res => {
        this.loading = false
        this.$emit('dataListLoadingFun', false)
        this.nodeClick()
        this.initTreeData()
        this.$message.success(res.msg)
      })
    },
    nodeClick (data) {
      if (data) {
        this.$emit('sysDictFun', data.code)
      } else {
        this.$emit('sysDictFun')
      }
    }
  }
}
</script>
